<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
    <head>        
        <title>百市千县-频率报价配置</title>
        <!-- META SECTION -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <!-- END META SECTION -->
        
        <!-- CSS INCLUDE -->        
        <link rel="stylesheet" href="${ctx}/rs/css/bootstrap-table.css" />
        <link rel="stylesheet" href="${ctx}/rs/css/main.css" />
        <link id="theme" rel="stylesheet" href="${ctx}/rs/joli/css/theme-default.css" />
        <!-- EOF CSS INCLUDE -->                                    
    </head>
<body>
	
	<!-- START PAGE CONTAINER -->
        <div class="page-container">
        	<!-- 引入左菜单部分 -->
            <jsp:include page="../joli/menu.jsp"></jsp:include>
            
            <!-- START PAGE CONTENT -->
            <div class="page-content">
                
                <jsp:include page="../joli/top.jsp"></jsp:include>
                
                <!-- START BREADCRUMB -->
                <ul class="breadcrumb">
                    <li><a href="#">FM广告管理</a></li>                    
                    <li class="active">频率报价配置</li>
                </ul>
                <!-- END BREADCRUMB -->   
                
                
                <!-- PAGE CONTENT WRAPPER -->
                <div class="page-content-wrap">
                	<div class="row">
                		<div class="col-xs-12">
                			<div class="pageTab">
                				<a class="active" value="0">待配置频率</a>
                				<a value="1">已配置频率</a>
                			</div>
                			<hr style="margin-top: 5px;"/>
                			<div id="toolbar" class="searchArea">
                				<div class="row">
                					<div class="col-sm-1 title">覆盖城市</div>
                					<div class="col-sm-10">
                						<ul id="s_areaName">
                							<li class="active">全国</li>
                							<li>浙江</li>
                							<li>江苏</li>
                							<li>山东</li>
                							<li>河南</li>
                							<li>河北</li>
                							<li>安徽</li>
                							<li>云南</li>
                							<li>贵州</li>
                							<li>四川</li>
                						</ul>
                					</div>
                				</div>
                				<div class="row">
                					<div class="col-sm-1 title">电台级别</div>
                					<div class="col-sm-10">
                						<ul id="s_broadcastingLevel">
                							<li class="active">不限</li>
                						<!-- 	<li>国家级</li>
                							<li>省级</li> -->
                							<li>地市级</li>
                							<li>区县电台</li>
                						</ul>
                					</div>
                				</div>
                				<div class="row hidden" id="quotationPlan">
                					<div class="col-sm-1 title">报价方案</div>
                					<div class="col-sm-10">
                						<ul id="s_bidId">
                							<li value="0" class="active">不限</li>
                							<c:forEach items="${bList}" var="item">
                								<li value="${item.bidId}">${item.bidName}</li>
                							</c:forEach>
                						</ul>
                					</div>
                				</div>
                				<!-- <div class="row">
                					<div class="col-sm-8 text-center">
                						<a class="btn btn-default" onclick="refresh()">确定筛选</a>
                					</div>
                				</div> -->

                				<hr/>

                				<div class="row">
                					<div class="col-sm-12">
                						<div class="form-group col-xs-4 mw120">	<input type="text" class="form-control mt2" id="kesearchInputy" name="searchInput" maxlength="6" placeholder="请输入频率名称"></div><a class="btn btn-default" onclick="refresh()">搜索</a>
                					</div>
                				</div>

								<h5 class="unableTxt">频率列表</h5>
							</div>
							
							<table id="table" cellpadding="0" cellspacing="0" data-toggle="table" data-toolbar="#toolbar"
								data-url="${ctx}/broadcastInfo/page.htm"
								data-cache="false"
								data-pagination="true" 
								data-side-pagination="server"
								data-page-list="[10, 20, 50, 100]"
								data-page-size="20"  
								data-query-params="queryParams">
								<thead>
									<tr class="tab-th">
										<th data-field="broadcastingName" class="col-md-2">频率</th>
										<th data-field="broadcastingLevel" class="col-md-2">电台级别</th>
										<th data-field="audiRate" class="col-md-1">收听率</th>
										<th data-field="frequencyType" data-formatter="typeFormatter" class="col-md-2 text-left">频率类型</th>
										<th data-field="areaName" data-formatter="typeFormatter" data-formatter="areaFormatter" class="col-md-3 text-left">覆盖城市</th>
										<th data-field="action" data-formatter="actionFormatter" class="col-md-2">操作</th>
									</tr>
								</thead>
							</table>
                		</div>
             		</div>
            	</div>
            	
            	<!-- Modal -->
				<div class="modal fade" id="bidModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				  <div class="modal-dialog">
				    <div class="modal-content">
				      <div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				        <h4 class="modal-title" id="myModalLabel">选择报价方案</h4>
				      </div>
				      <div class="modal-body">
				          <form id="bidForm" action="${ctx}/broadcastInfo/setPlan.htm" class="form-horizontal" method="post">
				          	<input type="hidden" name="id" id="hidBrocastId"/>
				          	<div class="form-group">
				          		<div class="col-sm-12">
				          			<c:forEach items="${bList}" var="item">
				          				<div class="p5_10">
						          			<input type="radio" name="bidId" value="${item.bidId}"/>
						          			<span class="radioTxt" style="padding: 5px;">${item.bidName }</span>
				          				</div>
				          			</c:forEach>
				          			<div id="cancelPlan" class="p10">
					          			<input type="radio" name="bidId" value="0"/>
					          			<span class="radioTxt" style="padding: 5px;">取消报价方案</span>
			          				</div>
				          		</div>
				          	</div>
				          </form>
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-primary" onclick="valiSubmitPlan();">确定</button>
				        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				      </div>
				    </div>
				  </div>
				</div>
		</div>
		</div>
		
	<!-- 引入所有joli的脚本 -->
	<jsp:include page="../joli/scripts.jsp"></jsp:include>
	<!-- 引入页面需要的脚本 -->
	<script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table-zh-CN.js"></script>
	<script src="${ctx}/rs/js/jquery.formatDate.js"></script>
	<script src="${ctx}/rs/js/my97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${ctx}/rs/js/session-out-error.js"></script>
	<script src="${ctx}/rs/js/jquery.validate.min.js"></script>
	<script src="${ctx}/rs/js/jquery.form.js" type="text/javascript"></script>
	<script src="${ctx}/rs/js/messages_zh.min.js"></script>
	
	<script>
	  activeMenu($("#menu_fmgggl_2"));
	  
	  
	  $(".pageTab a").on("click",function(e){
		 $(this).addClass("active").siblings().removeClass("active");
		 var v = $(this).attr("value");
		 if(v == '0'){
			 $("#quotationPlan").addClass("hidden");
		 }else{
			 $("#quotationPlan").removeClass("hidden");
		 }
		 refresh();
	  });
	  
	  $(document).on("click",".radioTxt",function(e){
		 $(this).prev().click();
	  });
	  
	  $(".searchArea").off("click").on("click","li",function(e){
		  $(this).addClass("active").siblings().removeClass("active");
	  })
	  
	  var $table = $('#table');
      
      $table.on('click-row.bs.table', function (e, row, $element) {
	    	$table.bootstrapTable('uncheckAll');
	    	$table.bootstrapTable('check', $element.index());
      });
      
      $table.bootstrapTable({
          height: getHeight()
      });
	    
      //获取分辨率高度
	    function getHeight() {
	        return window.screen.height - 108;
	    }
	    
	    $(window).resize(function () {
      	$table.bootstrapTable('resetView',{height: getHeight()});
      });
	    
	    //初始化刷新
	     function refresh(pageIndex,selectPage){
	    	if(!pageIndex && !selectPage){
	    		pageIndex = 0;
	    		selectPage = 0;
	    	}
			var pageSize = $table.bootstrapTable('getOptions').pageSize;
			pageIndex=pageIndex*pageSize;
			
			var areaName = $("#s_areaName li.active").text();
			if(areaName=='全国'){
				areaName = '';
			}
	    	var broadcastingLevel = $("#s_broadcastingLevel li:gt(0).active").text();
	    	var broadcastingName = $("#kesearchInputy").val(); 
	    	var bidId = "";
	    	if(!$("#quotationPlan").hasClass("hidden")){
		    	bidId = $("#s_bidId li.active").attr("value");
	    	}
	    	$table.bootstrapTable('refresh', {
	    		silent: true,
	    		cache : false,
	    		url: '${ctx}/broadcastInfo/page.htm',
                query: {
                	areaName : encodeURI(areaName),
    				broadcastingLevel: encodeURI(broadcastingLevel),
    				broadcastingName: encodeURI(broadcastingName),
    				bidId: bidId,
	   				pageIndex : pageIndex,
	   				pageSize : pageSize
	   			}
           });
	    	$table.bootstrapTable('selectPage', selectPage);
	    }
	    
	    function add() {
	    	var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
			var pageIndex = pageNumber - 1;
			bootstrapQ.dialog({
				url : '${ctx}/user/add.htm',
				title : '新增图文资讯',
				width : "750px",
				scrolly : "true",
				bheigth : "430px",
				close : 'true',
				hidebtn : 'true'
			},function(){
				//回调触发关闭窗口
				$("#bsmodal").modal("hide");
				refresh(pageIndex,pageNumber);
			});
		};
		
		function edit() {
			var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
			var pageIndex = pageNumber - 1;
			var rows = $table.bootstrapTable('getSelections');
			if (rows.length == 1) {
				bootstrapQ.dialog({
					url : "${ctx}/user/edit.htm?id="+ rows[0].id,
					title : "编辑图文资讯",
					width : "750px",
					scrolly : "true",
					bheigth : "430px",
					close : 'true',
					hidebtn : 'true'
				},function(){
					//回调触发关闭窗口
					$("#bsmodal").modal("hide");
					refresh(pageIndex,pageNumber);
				});
			}else{
				bootstrapQ.alert("请选中一条记录");
			}
       }
		
		function removeData(id) {
		   var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
		   var pageIndex = pageNumber - 1;
		   var rows = $table.bootstrapTable('getSelections');
		   var len=$("#table tbody").find("tr").length;
	       if(len==rows.length){
		        pageIndex = pageIndex - 1;
		   }
           if(id||rows.length > 0){
           	bootstrapQ.confirm('确定删除选中记录？',function(){
           		var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                       return row.id;
                   });
           		ids = id?[id]:ids;
                   $.ajax({
                	   url: "${ctx}/bsqx/deleteDuration.htm?id="+id,
                       success: function (text) {
                       	bootstrapQ.msg({
    						    msg  : '删除成功！',
    						    type : 'success',
    						    time : 2000
    						});
                       	refresh(pageIndex,pageNumber);
                       },
                       error: function () {
                       	bootstrapQ.msg({
    						    msg  : '删除失败！',
    						    type : 'danger',
    						    time : 2000
    						});
                       	refresh(pageIndex,pageNumber);
                       }
                   });
   			},null);
           }else{
           	bootstrapQ.alert("请选择要删除的记录！");
           }
       }
		
	    function queryParams(params) {
	    	var areaName = $("#s_areaName li.active").text();
	    	if(areaName=='全国'){
				areaName = '';
			}
	    	var broadcastingLevel = $("#s_broadcastingLevel li:gt(0).active").text();
	    	var bidId = "";
	    	if(!$("#quotationPlan").hasClass("hidden")){
		    	bidId = $("#s_bidId li.active").attr("value");
	    	}
			return {
				areaName : encodeURI(areaName),
				broadcastingLevel: encodeURI(broadcastingLevel),
				bidId: bidId,
				pageIndex : params.offset,
				pageSize : params.limit
			};
		}
	    
	    function typeFormatter(value, row, index){
	    	if(value){
	    		var t = value.split(",");
	    		var res = "";
	    		$.each(t,function(i,item){
	    			res += '<label class="label label-type m5">'+item+'</label>';
	    		});
	    		return res;
	    	}
	    }
	    
		function actionFormatter(value, row, index){
			var v = $(".pageTab a.active").attr("value");
			if(v == '0'){
				return '<a  href="javascript:showQuotationPlan('+row.id+');">选择报价方案</a>';
			}else{
				return '<a  href="javascript:updateQuotationPlan('+row.id+','+row.bidId+');">修改报价方案</a>' + '<br/>'
					+ '<a  href="javascript:updateTimeRange('+row.id+');">编辑播出时段</a>'
			}
			
		}
		
		function showQuotationPlan(id){
			$("#hidBrocastId").val(id);
			$("#cancelPlan").hide().find(":input").attr("disabled","disabled");
			/* 点空白处不消失 */
			$('#bidModal').modal({backdrop: 'static'});
		}
		
		function updateQuotationPlan(id,bidId){
			$("#hidBrocastId").val(id);
			$("#cancelPlan").show().find(":input").removeAttr("disabled");
			$("#bidForm").find("input[type='radio']").each(function(i,item){
				if($(item).attr("value")==bidId){
					$(item)[0].checked = true;
				}else{
					$(item)[0].checked = false;
				}
			});
			$("#bidModal").modal("show");
		}
		
		function updateTimeRange(id){
			if(!id){
				bootstrapQ.msg({
					msg: '参数不全！',
					type: 'danger',
					time: 2000
				});
				return;
			}
			bootstrapQ.dialog({
				title: '设置播出时间段位',
				url: '${ctx}/bsqxTimePoint/toUpdateTimeRange.htm?broadcastId='+id,
				width : "600px",
				scrolly : "true",
				bheigth : "500px",
				close : 'true',
				hidebtn : 'true'
			},function(){
				//回调触发关闭窗口
				refresh();
				return true;
			});
		}
		
		function valiSubmitPlan(){
			if($("#bidForm :input:not(:disabled):checked").size()==0){
				bootstrapQ.msg({
					msg: '请先选择方案',
					type: 'danger',
					time: 2000
				});
			}else{
				var options = {
					dataType : "json",
					beforeSubmit : function() {
						$(".unable").show();
					},
					success : function(result) {
						if(!$('.unable').is(':hidden')){
							$(".unable").hide();
						}
						if ((typeof result == 'boolean') && result) {
							// 普通消息提示条
							bootstrapQ.msg({
								msg : '保存成功！',
								type : 'success',
								time : 2000
							});
							$("#bidModal").modal("hide");
							refresh();
						} else if(typeof result == 'boolean') {
							bootstrapQ.msg({
								msg : '保存失败！',
								type : 'danger',
								time : 2000
							});
						}else{
							bootstrapQ.msg({
								msg : result,
								type : 'danger',
								time : 2000
							});
						}
					},
					error : function(result) {
						if(!$('.unable').is(':hidden')){
							$(".unable").hide();
						}
						bootstrapQ.msg({
							msg : "保存失败！",
							type : 'danger',
							time : 2000
						});
					}
				};
				$("#bidForm").ajaxSubmit(options);
			}
		}
		
	</script>
</body>
</html>